<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>交班管理</title>
    <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
    <link rel="stylesheet" href="/app/admin/component/layui/css/layui.css" />
    <style>
        .main-container {
            padding: 15px 15px 15px 75px;
            background: #f2f2f2;
            min-height: 100vh;
        }
        .shift-box {
            background: #fff;
            padding: 20px;
            border-radius: 4px;
            margin-bottom: 15px;
        }
        .shift-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        .amount-box {
            text-align: center;
            padding: 20px;
            background: #f8f8f8;
            border-radius: 4px;
            margin-bottom: 20px;
        }
        .amount-label {
            color: #666;
            margin-bottom: 10px;
        }
        .amount-value {
            font-size: 24px;
            color: #009688;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <?php include base_path() . '/plugin/ky_shouyin/app/view/layout/topmenu.html'; ?>
    <?php include base_path() . '/plugin/ky_shouyin/app/view/layout/admin_leftmenu.html'; ?>
    
    <div class="main-container">
        <!-- 当前班次信息 -->
        <div class="shift-box">
            <div class="shift-title">当前班次</div>
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md3">
                    <div class="amount-box">
                        <div class="amount-label">现金收入</div>
                        <div class="amount-value">¥<span id="cashAmount">0.00</span></div>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="amount-box">
                        <div class="amount-label">微信收入</div>
                        <div class="amount-value">¥<span id="wechatAmount">0.00</span></div>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="amount-box">
                        <div class="amount-label">支付宝收入</div>
                        <div class="amount-value">¥<span id="alipayAmount">0.00</span></div>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="amount-box">
                        <div class="amount-label">总收入</div>
                        <div class="amount-value">¥<span id="totalAmount">0.00</span></div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 20px;text-align: center;">
                <button class="layui-btn" id="endShift">结束交班</button>
            </div>
        </div>

        <!-- 交班记录 -->
        <div class="shift-box">
            <div class="shift-title">交班记录</div>
            <div class="layui-form" lay-filter="searchForm">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">收银员</label>
                            <div class="layui-input-block">
                                <select name="staff_id">
                                    <option value="">全部</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">日期范围</label>
                            <div class="layui-input-block">
                                <input type="text" name="date_range" id="dateRange" placeholder="请选择日期范围" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <div class="layui-input-block" style="margin-left: 0;text-align: right;">
                                <button class="layui-btn" lay-submit lay-filter="searchShift">搜索</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <table id="shiftTable" lay-filter="shiftTable"></table>
        </div>
    </div>

    <!-- 表格工具栏模板 -->
    <script type="text/html" id="tableToolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="export">
                <i class="layui-icon layui-icon-export"></i> 导出
            </button>
        </div>
    </script>

    <!-- 表格操作列模板 -->
    <script type="text/html" id="tableBar">
        <a class="layui-btn layui-btn-xs" lay-event="detail">查看详情</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
    </script>

    <script src="/app/admin/component/layui/layui.js"></script>
    <script src="/app/admin/component/pear/pear.js"></script>
    <script>
    layui.use(['table', 'form', 'laydate', 'layer'], function(){
        var table = layui.table
            ,form = layui.form
            ,laydate = layui.laydate
            ,layer = layui.layer
            ,$ = layui.$;
        
        // 初始化日期范围选择器
        laydate.render({
            elem: '#dateRange'
            ,type: 'datetime'
            ,range: true
        });
        
        // 获取收银员列表
        $.ajax({
            url: '/app/ky_shouyin/staff/getList',
            success: function(res){
                if(res.code === 0) {
                    var html = '<option value="">全部</option>';
                    res.data.forEach(function(item){
                        html += '<option value="'+ item.id +'">'+ item.name +'</option>';
                    });
                    $('select[name="staff_id"]').html(html);
                    form.render('select');
                }
            }
        });

        // 获取当前班次统计
        function loadCurrentShift() {
            $.ajax({
                url: '/app/ky_shouyin/admin/staff/currentShift',
                success: function(res){
                    if(res.code === 0) {
                        $('#cashAmount').text(res.data.cash_amount.toFixed(2));
                        $('#wechatAmount').text(res.data.wechat_amount.toFixed(2));
                        $('#alipayAmount').text(res.data.alipay_amount.toFixed(2));
                        $('#totalAmount').text(res.data.total_amount.toFixed(2));
                    }
                }
            });
        }
        loadCurrentShift();
        
        // 初始化表格
        table.render({
            elem: '#shiftTable'
            ,url: '/app/ky_shouyin/admin/staff/shiftList'
            ,toolbar: '#tableToolbar'
            ,defaultToolbar: ['filter', 'print', 'exports']
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'staff_name', title: '收银员', width: 100}
                ,{field: 'start_time', title: '开始时间', width: 160}
                ,{field: 'end_time', title: '结束时间', width: 160}
                ,{field: 'cash_amount', title: '现金收入', width: 120}
                ,{field: 'wechat_amount', title: '微信收入', width: 120}
                ,{field: 'alipay_amount', title: '支付宝收入', width: 120}
                ,{field: 'total_amount', title: '总收入', width: 120}
                ,{fixed: 'right', title: '操作', toolbar: '#tableBar', width: 150}
            ]]
            ,page: true
            ,limit: 20
            ,limits: [20,30,50,100]
            ,skin: 'line'
        });
        
        // 结束交班
        $('#endShift').click(function(){
            layer.confirm('确定要结束当前班次吗？', function(index){
                $.ajax({
                    url: '/app/ky_shouyin/admin/staff/endShift'
                    ,type: 'POST'
                    ,success: function(res){
                        if(res.code === 0) {
                            layer.msg('交班成功', {
                                icon: 1,
                                time: 1000
                            }, function(){
                                loadCurrentShift();
                                table.reload('shiftTable');
                            });
                        } else {
                            layer.msg(res.msg);
                        }
                    }
                });
                layer.close(index);
            });
        });
        
        // 表格工具栏事件
        table.on('toolbar(shiftTable)', function(obj){
            if(obj.event === 'export') {
                var checkStatus = table.checkStatus(obj.config.id);
                var data = checkStatus.data;
                if(data.length === 0) {
                    layer.msg('请选择要导出的数据');
                    return;
                }
                // 调用导出接口
                window.location.href = '/app/ky_shouyin/admin/staff/exportShift?ids=' + data.map(item => item.id).join(',');
            }
        });
        
        // 表格行工具事件
        table.on('tool(shiftTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail') {
                layer.open({
                    type: 2
                    ,title: '交班详情'
                    ,content: '/app/ky_shouyin/admin/staff/shiftDetail?id=' + data.id
                    ,area: ['80%', '90%']
                    ,maxmin: true
                });
            } else if(obj.event === 'delete') {
                layer.confirm('确定删除此交班记录？', function(index){
                    $.ajax({
                        url: '/app/ky_shouyin/admin/staff/deleteShift'
                        ,type: 'POST'
                        ,data: {id: data.id}
                        ,success: function(res){
                            if(res.code === 0) {
                                layer.msg('删除成功');
                                obj.del();
                            } else {
                                layer.msg(res.msg);
                            }
                        }
                    });
                    layer.close(index);
                });
            }
        });
        
        // 搜索表单提交
        form.on('submit(searchShift)', function(data){
            table.reload('shiftTable', {
                where: data.field
                ,page: {
                    curr: 1
                }
            });
            return false;
        });
    });
    </script>
</body>
</html> 